<template>
  <input
    type="radio"
    :value="value"
    :class="cn(checkboxVariants({ color, size }))"
    @change="onChange"
  />
</template>
<script setup lang="ts">
import { cva } from "class-variance-authority";
import { cn } from "../utils";

import type { RadioColor } from "./types";
import type { Size } from "../ui/types";

const checkboxVariants = cva("radio", {
  variants: {
    color: {
      primary: "radio-primary",
      secondary: "radio-secondary",
      accent: "radio-accent",
      neutral: "radio-neutral",
      success: "radio-success",
      warning: "radio-warning",
      info: "radio-info",
      error: "radio-error",
    },
    size: {
      xs: "radio-xs",
      sm: "radio-sm",
      md: "radio-md",
      lg: "radio-lg",
      xl: "radio-xl",
    },
  },
  defaultVariants: {},
});

interface Props {
  color?: RadioColor;
  size?: Size;
  value?: any;
  checked?: boolean;
}
const props = defineProps<Props>();

const model = defineModel<any>();
function onChange() {
  model.value = props.value;
}
</script>
